<template>
  <window
    ref="win"
    title="考勤"
  >
    <div class="am-u-sm-12 am-text-right am-form-group">
      <el-button
        size="small"
        type="success"
        @click="handleExport"
      >导出</el-button>
    </div>
    <div class="am-u-sm-12 am-scrollable-horizontal">

      <table
        width="100%"
        class="am-table am-table-bordered am-table-compact am-table-striped am-text-nowrap"
      >
        <thead>
          <tr>
            <th>#</th>
            <th>学生</th>
            <th>学生手机号码</th>
            <th>班级状态</th>
            <th>考勤</th>
            <th>备注</th>
            <th>调课</th>
          </tr>
        </thead>
        <tbody>

          <tr
            v-for="(item,index) in tableData"
            :key="item.studentId"
          >
            <td>{{index + 1}}</td>
            <td>{{item.studentName}}</td>
            <td>{{item.studentPhoneNo}}</td>
            <td>{{ {'0' : '正常' , '1' : '已调出' , '2' : '调入' }[item.shiftStatus]}}</td>
            <td>
              <div
                class="am-form"
                v-if="item.shiftStatus != 1 "
              >
                <label class="am-radio-inline">
                  <input
                    type="radio"
                    :name="'status-'+item.studentId"
                    value="0"
                    v-model="item.attendanceStatus"
                  > 出勤
                </label>
                <label class="am-radio-inline">
                  <input
                    type="radio"
                    :name="'status-'+item.studentId"
                    value="1"
                    v-model="item.attendanceStatus"
                  > 缺勤
                </label>
                <label class="am-radio-inline">
                  <input
                    type="radio"
                    :name="'status-'+item.studentId"
                    value="2"
                    v-model="item.attendanceStatus"
                  > 迟到
                </label>
                <label class="am-radio-inline">
                  <input
                    type="radio"
                    :name="'status-'+item.studentId"
                    value="3"
                    v-model="item.attendanceStatus"
                  > 请假
                </label>
              </div>
            </td>
            <td>
              <el-input
                size="small"
                v-model="item.remark"
                placeholder="备注"
              ></el-input>
            </td>
            <td>
              <el-button
                size="small"
                @click.native="shiftClass(item.classId, item.attendClassRecordId, item )"
                :disabled="item.shiftStatus == 1 || ( item.isAttendance == 1 && (item.attendanceStatus == 0 || item.attendanceStatus == 2))"
              >临时调课</el-button>
            </td>
          </tr>

        </tbody>
      </table>

    </div>
    <div class="am-u-sm-12 am-text-center">
      <el-button
        size="big"
        type="primary"
        class="am-btn am-btn-primary"
        @click="save"
      >{{preAttend?'预考勤':'保存'}}</el-button>
    </div>
    <shift-class
      ref="shiftClass"
      @completed="loadTableData('finish')"
    ></shift-class>
  </window>

</template>

<script>
import io from '../../lib/io'
import ShiftClass from './shiftClass.vue'

export default {
  props: ['preAttend'],
  data: function() {
    return {
      tableData: [],
      attendanceRecord: {},
      regId: ''
    }
  },
  components: {
    'shift-class': ShiftClass
  },
  methods: {
    show: function() {
      this.$refs.win.show({
        width: 1000,
        height: 500
      })
      this.loadTableData()
    },
    loadTableData(type) {
      if (!this.attendanceRecord.classLectureId) {
        return
      }
      if(type === 'finish'){
         this.$emit('completed')
      }
      var _this = this
      io.post(
        io.apiAdminAttendanceAttendanceRecordDetailList,
        {
          classLectureId: this.attendanceRecord.classLectureId
        },
        function(ret) {
          if (ret.success) {
            _this.tableData = ret.data
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    save: function() {
      var _this = this
      _this.$showLoading()
      let url = this.preAttend
        ? io.saveAttendanceRecordAdvanceDetail
        : io.apiAdminAttendanceSaveAttendanceRecordDetail
      io.post(
        url,
        {
          classLectureId: this.attendanceRecord.classLectureId,
          details: JSON.stringify(
            this.tableData.map(function(item) {
              return {
                attendClassRecordId: item.attendClassRecordId,
                attendanceStatus: item.attendanceStatus,
                remark: item.remark || ''
              }
            })
          )
        },
        function(ret) {
          _this.$hiddenLoading()
          if (ret.success) {
            _this.$toast('保存成功')
            _this.$emit('completed')
            _this.$refs.win.close()
          } else {
            _this.$alert(ret.desc)
          }
        }
      )
    },
    handleExport() {
      io.downloadFile(
        io.exportAttendanceRecordDetail,
        {
          classLectureId: this.attendanceRecord.classLectureId,
          details: JSON.stringify(
            this.tableData.map(function(item) {
              return {
                attendClassRecordId: item.attendClassRecordId,
                attendanceStatus: item.attendanceStatus,
                remark: item.remark || ''
              }
            })
          )
        },
        function(ret) {}
      )
    },
    shiftClass: function(classId, attendClassRecordId, obj) {
        io.post(io.apiAdminCourseClassDetail, { courseClassId: classId }, ret => {
          if (ret.success) {
            let originClass = {}
            originClass.courseClass = ret.data.courseClass
            this.$refs.shiftClass.regId = attendClassRecordId
            this.$refs.shiftClass.args.defaultAttendClassRecordId = attendClassRecordId
            this.$refs.shiftClass.itemRecord.originClass = originClass
            this.$refs.shiftClass.itemRecord.originClass.fromAttendClassRecordId = attendClassRecordId

            this.$refs.shiftClass.show()
          } else {
            _this.$alert(ret.desc)
          }
        })
      }
  }
}
</script>
